// 构造函数
function Change(obj){
    this.el = this.getEl(obj.el)
    this.data = obj.datas
    this.datas = [...this.data]
    this.curI = obj.curI || 1
    this.page = obj.page || 5
    this.all()
}
// 原型对象
Change.prototype.all = function (){
    this.render()
    this.pages()
    this.eventAll()
}
// 判断el类型
Change.prototype.getEl = function(el){
    if(el.nodeType === 1){
        return el
    }else if(typeof(el) === 'string'){
        return this.$(el)
    }else{
        throw new Error('el参数错误')
    }
}
Change.prototype.$ = function(el,parent){
    parent = parent || document;
    return parent.querySelector(el);
}
Change.prototype.gets = function(el,parent){
    parent = parent || document;
    return [...parent.querySelectorAll(el)]
}
// 渲染数据
Change.prototype.render = function(){
    this.count = this.$('#count',this.el).value*1
    this.page = this.count
    this.pageSize = Math.ceil(this.datas.length/this.page)
    this.curData = this.datas.slice((this.curI-1)*this.page,this.curI*this.page)
    this.tbody = this.$('tbody',this.el)
    this.tbody.innerHTML = this.curData.map((obj)=>{
        return `<tr>
                    <th>${obj.name}</th>
                    <th>${obj.age}</th>
                    <th>${obj.sorc}</th>
                    <th>${obj.level}</th>
                </tr>`
    }).join('')
}
// 渲染分页
Change.prototype.pages = function(){
    let li = ''
    this.page_box = this.$('.page_box',this.el)
    for(i=0;i<this.pageSize;i++){
        li += `<li>${i+1}</li>`
    }
    this.$('ul',this.page_box).innerHTML = li
    this.page_box.classList.add('show')
    this.list = this.gets('li',this.$('ul',this.page_box))
    this.list[this.curI-1].classList.add('cur')
}
// 设置事件
Change.prototype.eventAll = function(){
    this.clickFn()
    this.changeFn()
    this.key()
}
// 点击事件
Change.prototype.clickFn = function(){
    this.lisFn()
    this.nextFn()
    this.prevFn()
    this.sortFn()
}
// 分页器
Change.prototype.lisFn = function(){
    this.gets('li').forEach((li,i)=>{
        li.addEventListener('click',()=>{
            this.curI = i+1
            this.active()
        })
    })
}
// 下一页
Change.prototype.nextFn = function(){
    this.$('#next').addEventListener('click',()=>{
        this.curI++
        if(this.curI > this.pageSize) this.curI = this.pageSize
        this.active()
    })
}
// 上一页
Change.prototype.prevFn = function(){
    this.$('#prev').addEventListener('click',()=>{
        this.curI--
        if(this.curI<1) this.curI = 1
        this.active()
    })
}
// 高亮
Change.prototype.active = function(){
    this.render()
    this.$('.cur').classList.remove('cur')
    this.list[this.curI-1].classList.add('cur')
}
// 值变化事件
Change.prototype.changeFn  = function(){
    this.$('#count').addEventListener('change',()=>{
        this.curI = 1
        this.all()
    })
}
// 搜索框
Change.prototype.key = function(){
    this.search = this.$('#search')
    this.search.addEventListener('keydown',(e)=>{
        if(e.keyCode === 13){
            let val = this.search.value.trim()
            if(val === '') this.datas = this.data
            this.datas = this.data.filter(obj => obj.name.includes(val))
            if(this.datas.length === 0) return alert('没有相关信息，请重新输入')
            this.curI = 1
            this.all()
        }
    })
}
// 排序
Change.prototype.sortFn = function(){
    this.$('#order').addEventListener('change',()=>{
        let val = this.$('#order').value.trim()
        if(val == -1) this.datas = this.data 
        if(val === 'age') this.datas = this.data.sort((a,b)=> a.age- b.age)
        if(val === 'sorc') this.datas = this.data.sort((a,b)=>a.sorc-b.sorc)
        if(val === 'level') this.datas = this.data.sort((a,b)=>a.level.charCodeAt(0) - b.level.charCodeAt(0))
        if(val === "name") this.datas.sort((a,b) => a.name.localeCompare(b.name))
        this.all()
    })
}
// 实例化对象
new Change({
    el : '.wrap',
    datas : datas
})